<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en" >
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="/js/jquery.js" th:src="@{/js/jquery.js}"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            margin-left: 1.5rem;
            padding: 5px 0;
            list-style: none;
        }
    </style>
</head>
<body>
    <a href="/user/loginOut">注销</a>
    <div id="game_types" style="width: 20%;height: 100%;background-color: beige;"></div>
    <div>
        <iframe id="frame" name="main"></iframe>
    </div>
    <script th:inline="javascript" language="JavaScript">
        var ul = "";
        function treeNode(tree) {
            tree.forEach(function (node,index) {
                if(node.subsTypes){
                    ul+="<li id=\""+node.id+"\"><a href=\"#\" target='frame' class='type_href'>"+node.categoryName+"</a><ul>";
                    treeNode(node.subsTypes);
                    ul+="</ul></li>";
                }
            });
        }

        /**
         * 加载游戏类型
         */
        function loadGameTypes(){
            $.ajax({
                url:"/games/type",
                dataType:"json",
                type:"get",
                success:function (datas) {
                    console.log(datas.map.types);
                    var $game_types = $("#game_types");
                    if(datas!=null){
                        treeNode(datas.map.types);
                        $game_types.html("<ul>"+ul+"</ul>");
                    }
                }
            });
        }

        window.onload=function () {
            loadGameTypes();
        }
        // var uid = [[${UID}]];
        // var rid = [[${RID}]];
        // window.onload=function(){
        //     if(uid!=null && rid!=null){
        //         $.ajax({
        //             type: "get",
        //             url: "/main",
        //             beforeSend: function(request) {
        //                 request.setRequestHeader("UID", uid);
        //                 request.setRequestHeader("RID", rid);
        //             },
        //             dataType:"json"
        //         });
        //     }
        // }
    </script>
</body>
</html>